<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


    <div id="app">
        {{msg}}
        <p>{{name}}</p>
        <span>{{age}}</span>
        <p v-for="name in array">{{name}}</p>
        <div v-for="name in array">
            <span>{{name}}</span>
        </div>

        <select>
            <option v-for="name in array" v-bind:value="name">{{name}}</option>
        </select>
        <select>
            <option v-for="name in array"  :value="name">{{name}}</option>
        </select>

        <div>
            <p v-show="eq">你能看见我吗</p>
            <input type="button" value="点击" @click="eq=!eq">

        </div>
        <div>
             <input type="button" value="点击al" @click="al">
        </div>
        <div>
            <!--v-model双向绑定-->
            <input type="text" v-model="textval">
            <p v-once>固定值：{{ textval }}</p>
            <p>动态值：{{ textval }}</p>
        </div>
        <div>
            <p>{{innerHTML}}</p>
            <p v-html="innerHTML"></p>
        </div>
        <div>
            <a :href="url">{{url}}</a>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
       var app = new Vue({
           el:"#app",
           data() {
               return {
                   msg:"hellowwrodl",
                   name:"andashu",
                   age:14,
                   array:["xiaozhang","xiaowang","xiaohong"],
                   eq:true,
                   textval:"andashu"
                   url:"www.besttest.cn"
               }
           },
           methods:{
               al(){
                   var msg="hello methods"
                   console.log(this.msg)
                   console.log(msg)
               }
           }
       })
    </script>
</body>
</html>